<template>
  <div class="home-container">
    <div class="home-top">
      <div class="home-top-left">
        <el-carousel
          indicator-position="inside"
          ref="carouselRef"
          :height="carouselHeight"
        >
          <el-carousel-item
            v-for="item in items"
            :key="item.id"
            class="home-top-item"
          >
            <!-- 每个轮播项包裹一个 router-link -->
            <router-link :to="`/home/competition/${item.id}`">
              <img :src="item.image" />
            </router-link>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="home-top-right">
        <div class="left">
          <router-link
            :to="item.ImgUrl"
            v-for="(item, index) in images"
            :key="index"
          >
            <img :src="item.image" :title="item.title" />
          </router-link>
        </div>
        <div class="right">
          <router-link to="/home/ask">
            <img src="@/assets/ai.png" title="AI页面跳转" />
          </router-link>
        </div>
      </div>
    </div>
    <div class="home-bottom">
      <div class="header">热门竞赛</div>

      <!-- 分类按钮 -->
      <div class="category-buttons">
        <el-button
          v-for="(category, index) in categorys"
          :key="index"
          @click="handleCategoryClick(category)"
          :class="[
            'category-button',
            { active: selectedCategory === category },
          ]"
          round
          >{{ category }}</el-button
        >
        <el-button class="category-button" @click="GoToCompetition()" round
          >发现更多竞赛</el-button
        >
      </div>

      <!-- 竞赛列表 -->
      <div class="competition-container">
        <el-row :gutter="20">
          <el-col
            :span="6"
            v-for="(competition, id) in competitionList"
            :key="id"
          >
            <el-card class="competition-card" shadow="hover">
              <router-link :to="'/home/competition/' + competition.id"
                ><img
                  :src="competition.image || defaultImage"
                  class="card-image"
              /></router-link>

              <div class="card-content">
                <router-link :to="'/home/competition/' + competition.id"
                  ><h3 class="title">{{ competition.name }}</h3></router-link
                >

                <p class="category">比赛类型：{{ competition.category }}</p>
                <p class="description">
                  比赛描述：{{ competition.description }}
                </p>
                <div class="time">
                  <time
                    >开始时间：{{ competition.startTime | formatDate }}</time
                  >
                  <time>结束时间：{{ competition.endTime | formatDate }}</time>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetHotCompetition } from "@/api";
export default {
  name: "Index",
  filters: {
    formatDate(date) {
      return date
        ? new Date(date).toISOString().replace("T", " ").substring(0, 19)
        : null;
    },
  },
  data() {
    return {
      carouselHeight: "300px", // 响应式高度控制
      items: [
        { id: 1, image: require("@/assets/background.png") },
        { id: 2, image: require("@/assets/background1.png") },
        { id: 3, image: require("@/assets/background4.png") },
      ],
      images: [
        {
          id: 1,
          image: require("@/assets/person.png"),
          ImgUrl: "/home/person",
          title: "个人详情页跳转",
        },
        {
          id: 2,
          image: require("@/assets/competition.png"),
          ImgUrl: "/home/competition",
          title: "比赛页面跳转",
        },
      ],
      defaultImage:
        "https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png",
      competitionList: [],
      categorys: ["理工类", "创新创业类", "人文社科类", "医学类"],
      selectedCategory: null,
    };
  },
  mounted() {
    // 页面加载自动触发第一个分类
    if (this.categorys.length > 0) {
      this.handleCategoryClick(this.categorys[0]);
    }
  },
  methods: {
    async handleCategoryClick(category) {
      this.selectedCategory = category;
      this.competitionList = []; // 请求前清空旧数据

      try {
        const res = await reqGetHotCompetition(category);

        if (res.code !== 200) {
          this.$message.error("获取数据失败");
          return;
        }

        this.competitionList = res.data;
      } catch (error) {
        console.error("请求失败:", error); // 控制台输出错误详情
        this.$message.error("网络异常，请稍后再试");
      }
    },
    GoToCompetition() {
      this.$router.push("/home/competition");
    },
  },
};
</script>
<style scoped lang="scss">
.home-container {
  position: relative;
  height: calc(100vh - 60px);
}
a {
  text-decoration: none;
}

.home-top {
  display: flex; // 开启弹性盒子
  align-items: flex-start; // 顶部对齐
  justify-content: space-between; // 左右间距自动分配
  width: 100%;
  background-color: rgb(248, 252, 255);
  .home-top-left {
    flex: 1 1 60%; // 固定占比60%
    max-width: 60%; // 防止弹性伸缩导致变形
    // 轮播容器样式
    .el-carousel {
      width: 90%;
      margin-left: 10%;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

      // 指示点容器样式
      .el-carousel__indicators {
        position: absolute;
        bottom: 20px; // 距离底部距离
        left: 50%;
        transform: translateX(-50%);
        z-index: 9;
      }

      // 箭头位置优化
      .el-carousel__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.3);

        &:hover {
          background-color: rgba(0, 0, 0, 0.5);
        }
      }

      // 轮播项样式
      .el-carousel__item {
        height: 100%;
        width: 100%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover; //替代原生缩放，避免图片变形，确保关键区域始终可见
        }

        &:nth-child(2n) {
          background-color: #99a9bf;
        }
        &:nth-child(2n + 1) {
          background-color: #d3dce6;
        }
      }
    }
  }
  .home-top-right {
    // display: flex;
    margin-left: 10px;
    flex: 1 1 38%; // 固定占比35%
    display: flex;
    gap: 10px; // 内部元素间距
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
    .right {
      // margin-left: 10px;
      img {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

//底部竞赛区
.home-bottom {
  padding: 40px 60px;
  background-color: #f9f9f9;
}

.header {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.category-buttons {
  margin-bottom: 30px;

  .category-button {
    margin-right: 15px;
    padding: 10px 20px;
    width: 150px;
    font-size: 14px;
    transition: all 0.3s ease;
    border-color: #e0e0e0;
    background-color: #f5f7fa;
    color: #666;

    &.active {
      background-color: #409eff;
      color: white;
      border-color: #409eff;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 150px;
        height: 2px;
        background: linear-gradient(90deg, #409eff, #53c6ec);
        border-radius: 2px;
      }
    }
  }
}

.competition-container {
  .el-row {
    margin-bottom: -20px; // 抵消最后一行的底部间距
  }

  .el-col {
    margin-bottom: 20px;
  }
}

.competition-card {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 370px;

  .card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: left; // 所有文本左对齐
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .category {
      font-size: 13px;
      color: #888;
      margin-bottom: 5px;
    }

    .description {
      font-size: 12px;
      color: #666;
      flex-grow: 1;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 5px;
    }
    .time {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      color: #999;
    }
  }
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    .card-image {
      transform: scale(1.05);
    }
  }
}
</style>
